প্যারালাক্স স্ক্রলিং তৈরি করতে CSS ব্যবহার একটি সহজ এবং কার্যকরী পদ্ধতি। CSS3 এর নতুন বৈশিষ্ট্যগুলি যেমন transform এবং position সহ বিভিন্ন স্ক্রলিং ইফেক্টের মাধ্যমে আমরা পেজে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইফেক্ট যোগ করতে পারি। এখানে CSS এর মাধ্যমে প্যারালাক্স স্ক্রলিং তৈরি করার প্রক্রিয়া দেওয়া হলো।
CSS এর মাধ্যমে প্যারালাক্স স্ক্রলিং তৈরি করার পদক্ষেপ
- HTML স্ট্রাকচার তৈরি করা: প্রথমে, ওয়েবপেজে বিভিন্ন সেকশনের জন্য HTML কোড লিখতে হবে। এখানে একটি সাধারণ স্ট্রাকচার থাকবে, যাতে একটি ব্যাকগ্রাউন্ড ইমেজ এবং কন্টেন্ট লেয়ারের জন্য প্রয়োজনীয় ট্যাগ থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Srallax Scrolling Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax"></div>
<section class="content">
<h1>Welcome to the Parallax World</h1>
<p>This is an example of parallax scrolling using only CSS.</p>
</section>
<div class="parallax"></div>
<section class="content">
<h1>Another Section</h1>
<p>Continue exploring the parallax scrolling effect.</p>
</section>
</body>
</html>
- CSS কোড লেখা: এখানে, প্যারালাক্স ইফেক্টটি শুধুমাত্র CSS দ্বারা তৈরি করা হচ্ছে। আমরা ব্যাকগ্রাউন্ডে
background-attachment: fixed;ব্যবহার করব, যাতে ব্যাকগ্রাউন্ড স্ক্রল হয় না, তবে কন্টেন্ট স্ক্রল হয়।
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.parallax {
height: 100vh;
background-image: url('https://via.placeholder.com/1920x1080');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; /* This creates the parallax effect */
}
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.5rem;
max-width: 800px;
}
কোড ব্যাখ্যা
.parallaxক্লাস:background-image: প্যারালাক্স স্ক্রলিং এর জন্য একটি ইমেজ ব্যবহার করা হয়েছে।background-attachment: fixed: এটি ব্যাকগ্রাউন্ড ইমেজকে ফিক্সড করে দেয়, যাতে স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড স্ট্যাটিক থাকে।height: 100vh: পুরো স্ক্রীনজুড়ে প্যারালাক্স লেয়ারের উচ্চতা নির্ধারণ করা হয়।
.contentক্লাস:height: 100vh: কন্টেন্টের সেকশনও পূর্ণ স্ক্রীন উচ্চতা নেয়, যাতে প্যারালাক্স ইফেক্ট পরিষ্কারভাবে প্রদর্শিত হয়।display: flex,justify-content: center, এবংalign-items: center: কন্টেন্টটিকে সেন্টার করে দেয়।
ফলস্বরূপ
এই কোডে, যখন ব্যবহারকারী স্ক্রল করবে, ব্যাকগ্রাউন্ড ইমেজ ধীরে ধীরে স্ক্রল হবে, তবে কন্টেন্ট দ্রুত স্ক্রল হবে। এই প্রক্রিয়া একে একটি তিন-ডাইমেনশনাল (3D) অনুভূতি প্রদান করে, যা একটি আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে।
প্যারালাক্স স্ক্রলিং CSS এর মাধ্যমে সহজেই তৈরি করা যায় এবং এটি ওয়েব ডিজাইনকে আরও ডাইনামিক এবং আকর্ষণীয় করে তোলে। তবে, অতিরিক্ত গ্রাফিক্স ব্যবহারে ওয়েবপেজের পারফরমেন্সে প্রভাব পড়তে পারে, তাই সঠিকভাবে প্রয়োগ করা উচিত।
প্যারালাক্স স্ক্রলিং ওয়েব ডিজাইনে একটি অত্যন্ত জনপ্রিয় এবং আকর্ষণীয় টেকনিক, যেখানে স্ক্রলিংয়ের সময় ওয়েবপেজের বিভিন্ন স্তরের উপাদানগুলি আলাদা গতিতে স্ক্রল হয়। এই প্রক্রিয়ায় একটি সাধারণ CSS বৈশিষ্ট্য, background-attachment: fixed;, প্যারালাক্স ইফেক্ট তৈরিতে ব্যবহার করা হয়।
background-attachment: fixed; কি?
CSS এর background-attachment প্রপার্টি ওয়েবপেজের ব্যাকগ্রাউন্ড ইমেজের আচরণ নিয়ন্ত্রণ করে। এর তিনটি মূল মান রয়েছে:
scroll: ডিফল্ট মান, যেখানে ব্যাকগ্রাউন্ড ইমেজ স্ক্রলিংয়ের সাথে স্ক্রল হয়।fixed: ব্যাকগ্রাউন্ড ইমেজ স্ক্রলিংয়ের সময় স্থির থাকে, অর্থাৎ স্ক্রল করার সময় ব্যাকগ্রাউন্ড ইমেজের অবস্থান পরিবর্তিত হয় না। এটি প্যারালাক্স ইফেক্ট তৈরি করতে ব্যবহৃত হয়।local: ব্যাকগ্রাউন্ড ইমেজ কন্টেইনারের স্ক্রলিংয়ের সাথে স্ক্রল হয়।
background-attachment: fixed; দিয়ে প্যারালাক্স স্ক্রলিং তৈরি করা
যখন background-attachment: fixed; ব্যবহৃত হয়, তখন ওয়েবপেজের ব্যাকগ্রাউন্ড স্ক্রলিংয়ের সাথে স্থির থাকে, ফলে একে গভীরতার অনুভূতি দেয়। এটি একটি সহজ পদ্ধতি যা প্যারালাক্স স্ক্রলিংয়ের মতো ভিজ্যুয়াল ইফেক্ট তৈরি করে।
উদাহরণ
ধরা যাক, আপনার একটি ওয়েবপেজ আছে এবং আপনি চান যে ব্যাকগ্রাউন্ড ইমেজটি স্ক্রলিংয়ের সময় স্থির থাকে, তবে টেক্সট এবং অন্যান্য উপাদানগুলি সাধারণভাবে স্ক্রল করুক। এ ক্ষেত্রে আপনি নিম্নলিখিত CSS কোড ব্যবহার করতে পারেন:
.section {
height: 100vh; /* সেকশনের উচ্চতা পূর্ণ স্ক্রীন */
background-image: url('your-image.jpg'); /* ব্যাকগ্রাউন্ড ইমেজ */
background-size: cover; /* ইমেজটি সেকশনের আকারে পূর্ণ হবে */
background-position: center; /* ইমেজের অবস্থান কেন্দ্রে থাকবে */
background-attachment: fixed; /* ব্যাকগ্রাউন্ড ইমেজ স্থির থাকবে */
}
এখানে, .section ক্লাসের জন্য background-attachment: fixed; ব্যবহৃত হয়েছে, যা ব্যাকগ্রাউন্ড ইমেজকে স্ক্রলিংয়ের সময় স্থির রাখে। ফলে, যখন ব্যবহারকারী স্ক্রল করবে, তখন ব্যাকগ্রাউন্ড ইমেজ থাকবে তার জায়গায়, কিন্তু অন্যান্য কন্টেন্টগুলি স্বাভাবিকভাবে স্ক্রল করবে।
কিভাবে এটি কাজ করে?
- ব্যাকগ্রাউন্ড ইমেজ: স্ক্রলিংয়ের সময় ইমেজটি স্ক্রল হয় না, এটি স্থানান্তরিত হয় না এবং স্ক্রিনে এক স্থানে থাকে।
- ফরওয়ার্ড কন্টেন্ট: অন্যান্য কন্টেন্ট যেমন টেক্সট, ইমেজ, এবং বাটন স্বাভাবিকভাবে স্ক্রল করে এবং তাদের গতির সঙ্গে ব্যাকগ্রাউন্ডের গতির পার্থক্য তৈরি হয়।
background-attachment: fixed; এর সুবিধা
- সহজ প্রয়োগ: এটি প্যারালাক্স স্ক্রলিং তৈরি করার একটি সহজ এবং সরল উপায়। এতে জাভাস্ক্রিপ্ট বা অতিরিক্ত কোডিং প্রয়োজন হয় না।
- ভিজ্যুয়াল আকর্ষণ: ব্যাকগ্রাউন্ডের স্থির অবস্থান স্ক্রলিংয়ের সময় এক গভীরতার অনুভূতি সৃষ্টি করে, যা সাইটের ভিজ্যুয়াল আকর্ষণ বাড়ায়।
- পারফরমেন্স: ছোট আকারের ইমেজ বা কন্টেন্টের জন্য এটি ভাল পারফরমেন্স দেয়, কারণ এতে অতিরিক্ত অ্যানিমেশন বা স্ক্রিপ্টিং ব্যবহার করা হয় না।
সীমাবদ্ধতা
- মোবাইল ডিভাইস: মোবাইল ডিভাইসে
background-attachment: fixed;কাজ না করতে পারে, কারণ অনেক মোবাইল ব্রাউজার এই প্রপার্টিটি সমর্থন করে না। এটি মোবাইল ভিউতে ব্যাকগ্রাউন্ড স্ক্রলিংকে স্বাভাবিকভাবে পরিচালনা করতে পারে না। - পারফরমেন্স সমস্যা: ভারী ব্যাকগ্রাউন্ড ইমেজ বা কম্প্লেক্স ওয়েবপেজে এটি পারফরমেন্সের সমস্যা সৃষ্টি করতে পারে। বিশেষ করে পুরনো ডিভাইসে।
background-attachment: fixed; একটি সহজ এবং কার্যকরী পদ্ধতি প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরির জন্য। এটি বিশেষ করে ল্যান্ডিং পেজ বা ব্র্যান্ডিং সাইটে খুবই জনপ্রিয়, যেখানে ওয়েবপেজের গভীরতা এবং ভিজ্যুয়াল ইফেক্ট প্রধান ভূমিকা পালন করে। তবে, এর কিছু সীমাবদ্ধতা রয়েছে, বিশেষ করে মোবাইল ডিভাইসে, যা মনে রেখে এর প্রয়োগ করা উচিত।
প্যারালাক্স স্ক্রলিং (Srallax Scrolling) হল একটি ওয়েব ডিজাইন কৌশল, যেখানে ব্যাকগ্রাউন্ড এবং কন্টেন্টের স্ক্রলিং গতি ভিন্ন ভিন্ন থাকে। এটি একটি অত্যন্ত জনপ্রিয় টেকনিক, যা ওয়েবসাইটের ডিজাইনকে আকর্ষণীয় এবং ডাইনামিক করে তোলে। CSS এর মাধ্যমে একটি সিম্পল ব্যাকগ্রাউন্ড প্যারালাক্স স্ক্রলিং তৈরি করা খুবই সহজ। এই টিউটোরিয়ালে, আমরা CSS এর সাহায্যে একটি বেসিক প্যারালাক্স ব্যাকগ্রাউন্ড তৈরি করব।
Step-by-Step Guide: CSS দিয়ে Simple Background Srallax তৈরি
১. HTML ফাইল
প্রথমে, HTML ফাইলে প্যারালাক্স স্ক্রলিং এর জন্য একটি সেকশন তৈরি করতে হবে, যেখানে ব্যাকগ্রাউন্ড ইমেজ থাকবে এবং স্ক্রলিং এর মাধ্যমে সেই ইমেজের গতির পার্থক্য তৈরি হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Parallax Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<section class="parallax"></section>
<div class="content">
<h1>Scroll Down to See Parallax Effect</h1>
<p>Enjoy the beautiful effect!</p>
</div>
<section class="parallax"></section>
<script src="script.js"></script>
</body>
</html>
২. CSS ফাইল (styles.css)
এখন, CSS ফাইলে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরির জন্য প্রয়োজনীয় স্টাইলিং যুক্ত করতে হবে।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
height: 2000px; /* Ensure enough scroll space */
}
/* Parallax Effect */
.parallax {
height: 100vh; /* 100% of the viewport height */
background-image: url('your-image.jpg'); /* Replace with your image */
background-attachment: fixed; /* Keeps the background fixed while scrolling */
background-size: cover; /* Makes sure the background covers the whole section */
background-position: center; /* Centers the background */
}
/* Content Section */
.content {
text-align: center;
padding: 50px;
background-color: #f4f4f4;
color: #333;
}
.content h1 {
font-size: 3em;
}
.content p {
font-size: 1.2em;
}
৩. JavaScript (script.js)
এই উদাহরণে, আমরা JavaScript ব্যবহার না করলেও, প্যারালাক্স স্ক্রলিং এর জন্য শুধুমাত্র CSS ব্যবহার করেই এই ইফেক্ট তৈরি করা সম্ভব। তবে, যদি আপনি আরো উন্নত স্ক্রলিং বা গতির নিয়ন্ত্রণ করতে চান, তখন JavaScript ব্যবহার করা যেতে পারে।
কোডের ব্যাখ্যা
- HTML:
- এখানে দুটি
.parallaxক্লাসের সেকশন রাখা হয়েছে, যেগুলির মধ্যে প্যারালাক্স স্ক্রলিং ইফেক্ট থাকবে। এছাড়া একটি.contentসেকশন রাখা হয়েছে, যা স্ক্রল করার সময় দৃশ্যমান হবে।
- এখানে দুটি
- CSS:
.parallaxসেকশনেbackground-attachment: fixedব্যবহার করা হয়েছে, যা স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড ইমেজকে স্থির (fixed) রাখবে। এর ফলে, ব্যাকগ্রাউন্ড ধীরে স্ক্রল হবে, কিন্তু কন্টেন্ট দ্রুত স্ক্রল করবে।background-size: coverএবংbackground-position: centerব্যাকগ্রাউন্ড ইমেজকে ওয়েবপেজের পুরো সেকশনের সাথে ফিট করে রাখবে এবং কেন্দ্রিভূত করবে।.contentসেকশনে সাধারণ টেক্সট এবং অন্যান্য কন্টেন্ট থাকে, যা স্ক্রল করার সময় দ্রুত গতিতে চলে।
ফলস্বরূপ
এই কোডটি ব্যবহার করে আপনি একটি সিম্পল প্যারালাক্স স্ক্রলিং ব্যাকগ্রাউন্ড তৈরি করতে পারবেন। আপনি যে ছবিটি ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে চান, সেটি background-image প্রপার্টিতে দিয়ে দিতে হবে। এই ইফেক্টের মাধ্যমে, যখন আপনি পেজ স্ক্রল করবেন, তখন ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির পার্থক্য স্পষ্টভাবে দেখা যাবে।
সারাংশ
CSS এর মাধ্যমে প্যারালাক্স স্ক্রলিং তৈরি করা খুবই সহজ এবং এটি ওয়েব ডিজাইনে একটি অত্যন্ত আকর্ষণীয় ইফেক্ট প্রদান করে। এই টিউটোরিয়ালে, আমরা ব্যাকগ্রাউন্ডে প্যারালাক্স স্ক্রলিং ইফেক্ট যোগ করার জন্য CSS ব্যবহার করেছি। আপনি এই কোডটি আপনার ওয়েবসাইটে প্রয়োগ করে এটি দেখতে পারেন।
প্যারালাক্স স্ক্রলিং ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে, কিন্তু এটি মোবাইল বা ট্যাবলেট ডিভাইসে সঠিকভাবে কাজ করতে এবং ভালো অভিজ্ঞতা প্রদান করতে রেসপন্সিভ ডিজাইন (Responsive Design) কনফিগারেশন গুরুত্বপূর্ণ। প্যারালাক্স ইফেক্ট মোবাইল ডিভাইসে ঠিকঠাক কাজ করবে না যদি উপযুক্ত কনফিগারেশন না করা হয়। এর জন্য CSS, JavaScript, এবং মিডিয়া কুয়েরি (Media Queries) ব্যবহার করে প্যারালাক্স স্ক্রলিংয়ের রেসপন্সিভ ডিজাইন তৈরি করা যেতে পারে।
১. রেসপন্সিভ প্যারালাক্স স্ক্রলিংয়ের জন্য CSS কনফিগারেশন
CSS রেসপন্সিভ ডিজাইনে ওয়েবপেজের লেআউট এবং ভিজ্যুয়াল উপাদান সমন্বয় করতে সহায়তা করে। প্যারালাক্স স্ক্রলিংয়ে বিভিন্ন স্ক্রিন সাইজের জন্য আলাদা স্টাইল প্রয়োগ করতে মিডিয়া কুয়েরি ব্যবহার করা হয়।
ব্যাকগ্রাউন্ডের রেসপন্সিভ কনফিগারেশন
প্যারালাক্স স্ক্রলিংয়ে ব্যাকগ্রাউন্ড ইমেজের রেসপন্সিভ কনফিগারেশন খুবই গুরুত্বপূর্ণ, বিশেষ করে মোবাইল ডিভাইসে সঠিকভাবে কাজ করার জন্য।
CSS উদাহরণ:
.parallax {
background-image: url('your-image.jpg');
height: 100vh; /* Full viewport height */
background-attachment: fixed; /* Makes the background fixed during scroll */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Ensures background image covers the element */
}
@media screen and (max-width: 768px) {
.parallax {
background-attachment: scroll; /* Disables the parallax effect on mobile */
background-size: contain; /* Adjust the background size on mobile */
}
}
এখানে, মোবাইল ডিভাইসে background-attachment: scroll; ব্যবহার করা হয়েছে, যা প্যারালাক্স স্ক্রলিং ইফেক্ট বন্ধ করে দেয়, কারণ মোবাইল ডিভাইসে fixed প্রপার্টি ঠিকভাবে কাজ করে না। পাশাপাশি, background-size: contain; ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজের আকার সমন্বয় করা হয়েছে যাতে তা স্ক্রীনে ঠিকমত প্রদর্শিত হয়।
২. JavaScript এর মাধ্যমে স্ক্রলিং ইফেক্ট নিয়ন্ত্রণ
JavaScript প্যারালাক্স স্ক্রলিংয়ের কার্যকারিতা নিয়ন্ত্রণ করে এবং স্ক্রল ইভেন্টে বিভিন্ন উপাদানের গতির পার্থক্য তৈরি করে। মোবাইল ডিভাইসে স্ক্রলিং ইফেক্টের পারফরমেন্স উন্নত করতে JavaScript কোডের মধ্যে মিডিয়া কুয়েরি ব্যবহার করে প্রাসঙ্গিক পরিবর্তন করা হয়।
স্ক্রল ইভেন্ট ট্র্যাকিং এবং মোবাইল কনফিগারেশন
মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং সঠিকভাবে কাজ করার জন্য, স্ক্রলিং ইফেক্ট মোবাইল বা ট্যাবলেট ডিভাইসে অক্ষম করা হতে পারে। JavaScript কোডের মাধ্যমে স্ক্রলিংয়ের আচরণ পরিবর্তন করা হয়।
JavaScript উদাহরণ:
window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
let isMobile = window.innerWidth <= 768; // Check if the device is mobile
let parallaxBackground = document.querySelector('.parallax-background');
let parallaxContent = document.querySelector('.parallax-content');
// Apply parallax effect for desktop, disable it on mobile
if (!isMobile) {
parallaxBackground.style.backgroundPosition = `0 ${scrollPosition * 0.3}px`; // Slow background scroll
parallaxContent.style.transform = `translateY(${scrollPosition * 0.5}px)`; // Faster content scroll
} else {
parallaxBackground.style.backgroundPosition = `0 0`; // Remove parallax effect on mobile
parallaxContent.style.transform = `translateY(0)`; // Keep content stationary on mobile
}
});
এই কোডে, window.innerWidth এর মাধ্যমে ডিভাইসের স্ক্রীনের সাইজ চেক করা হচ্ছে। যদি এটি মোবাইল ডিভাইস হয় (768px বা তার কম), তবে প্যারালাক্স স্ক্রলিং ইফেক্ট বন্ধ করা হয় এবং কন্টেন্ট এবং ব্যাকগ্রাউন্ড স্থির হয়ে যায়।
৩. মিডিয়া কুয়েরি (Media Queries) ব্যবহার
মিডিয়া কুয়েরি ব্যবহার করে বিভিন্ন স্ক্রীন সাইজের জন্য আলাদা CSS স্টাইল প্রয়োগ করা হয়। এটি প্যারালাক্স স্ক্রলিংয়ের জন্য রেসপন্সিভ ডিজাইন তৈরি করতে সহায়ক।
CSS উদাহরণ:
/* Default styles for desktop */
.parallax {
background-image: url('your-image.jpg');
height: 100vh;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* Styles for tablets */
@media screen and (max-width: 1024px) {
.parallax {
height: 80vh;
background-attachment: scroll;
}
}
/* Styles for mobile */
@media screen and (max-width: 768px) {
.parallax {
height: 60vh;
background-attachment: scroll;
background-size: contain; /* Ensure the background fits the screen */
}
}
এখানে মিডিয়া কুয়েরি ব্যবহার করা হয়েছে যা মোবাইল এবং ট্যাবলেট ডিভাইসে প্যারালাক্স স্ক্রলিংয়ের ইফেক্টে পরিবর্তন আনে। মোবাইল ডিভাইসে background-attachment: scroll; ব্যবহার করা হয়েছে এবং background-size: contain; এর মাধ্যমে ব্যাকগ্রাউন্ডের আকার সঠিকভাবে সেট করা হয়েছে।
৪. Performance Optimization
মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিংয়ের পারফরমেন্স উন্নত করতে, একাধিক লেয়ারের পরিবর্তে একক লেয়ারের প্যারালাক্স ইফেক্ট ব্যবহার করা যেতে পারে। এর ফলে, স্ক্রলিংয়ের সময় কম প্রসেসিং পাওয়ারের প্রয়োজন হবে এবং সাইটটি আরও দ্রুত লোড হবে।
সারাংশ
প্যারালাক্স স্ক্রলিংয়ের জন্য রেসপন্সিভ ডিজাইন কনফিগারেশন তৈরি করতে CSS এবং JavaScript কে সমন্বিতভাবে ব্যবহার করতে হয়। CSS এর মাধ্যমে ওয়েবপেজের লেআউট এবং ব্যাকগ্রাউন্ড কনফিগার করা হয়, এবং JavaScript স্ক্রলিং ইফেক্ট নিয়ন্ত্রণ করে। মিডিয়া কুয়েরি ব্যবহার করে মোবাইল এবং ট্যাবলেট ডিভাইসে উপযুক্ত প্যারালাক্স স্ক্রলিং ইফেক্ট নিশ্চিত করা যায়, যার ফলে সাইটটি রেসপন্সিভ ও পারফরম্যান্স-দিক থেকে উপযুক্ত হয়।
প্যারালাক্স স্ক্রলিং (Srallax Scrolling) একটি অত্যন্ত জনপ্রিয় ওয়েব ডিজাইন টেকনিক, যা ডিজাইনে গভীরতা এবং গতির পার্থক্য তৈরি করে। এটি বিভিন্ন ডিভাইসে বিভিন্নভাবে কাজ করার জন্য কাস্টমাইজ করা যেতে পারে। বিশেষত, মোবাইল ডিভাইসগুলোতে স্ক্রলিংয়ের পারফরমেন্স এবং ব্যবহারকারীর অভিজ্ঞতা বিবেচনায় রেখে প্যারালাক্স ইফেক্টটি সঠিকভাবে কাস্টমাইজ করা প্রয়োজন।
এই গাইডে, আমরা CSS এর মাধ্যমে কীভাবে প্যারালাক্স স্ক্রলিংকে বিভিন্ন ডিভাইসে কাস্টমাইজ করা যায় তা দেখব।
১. মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করা
মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং অনেক সময় পারফরমেন্স সমস্যা সৃষ্টি করতে পারে, তাই এটি বন্ধ করা এক ভাল পদ্ধতি হতে পারে। সাধারণত মোবাইল ডিভাইসে ব্যাকগ্রাউন্ড ইমেজের গতির পরিবর্তন বা স্ক্রলিং প্যারালাক্স ইফেক্ট বন্ধ করা উচিত।
CSS ব্যবহার করে মোবাইল ডিভাইসে প্যারালাক্স বন্ধ করা
/* মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করা */
@media (max-width: 768px) {
.parallax-background {
background-attachment: scroll;
background-position: center;
}
}
এখানে max-width: 768px মিডিয়া কুয়েরি ব্যবহার করে আমরা মোবাইল স্ক্রীনে প্যারালাক্স ইফেক্ট বন্ধ করে দিয়েছি। background-attachment: scroll সেট করার মাধ্যমে ব্যাকগ্রাউন্ড ইমেজ আর স্ক্রলিংয়ের সময় ধীরে চলবে না, অর্থাৎ এটি সরাসরি স্ক্রল হবে।
২. ডেক্সটপে প্যারালাক্স স্ক্রলিং সক্রিয় রাখা
ডেস্কটপের জন্য আমরা প্যারালাক্স স্ক্রলিং চালু রাখব। তবে মোবাইল এবং ট্যাবলেটের জন্য এর পারফরমেন্স উন্নত করার জন্য এটি বন্ধ করা যেতে পারে।
CSS ব্যবহার করে ডেক্সটপে প্যারালাক্স সক্রিয় রাখা
/* ডেক্সটপে প্যারালাক্স স্ক্রলিং চালু রাখা */
@media (min-width: 769px) {
.parallax-background {
background-attachment: fixed;
background-position: center;
background-size: cover;
}
}
এখানে min-width: 769px কুয়েরি ব্যবহার করা হয়েছে, যা ডেক্সটপ এবং বড় স্ক্রীনের জন্য সক্রিয় থাকবে। এই কোডে background-attachment: fixed সেট করার মাধ্যমে ব্যাকগ্রাউন্ডে প্যারালাক্স ইফেক্ট চালু থাকবে।
৩. ট্যাবলেট ডিভাইসে প্যারালাক্স স্ক্রলিং কাস্টমাইজেশন
ট্যাবলেটের জন্য প্যারালাক্স স্ক্রলিংটি সাধারণত মোবাইলের মতোই কাস্টমাইজ করতে হয়, কারণ এর স্ক্রীন আকার মোবাইলের কাছাকাছি হতে পারে। তবে, এখানে ব্যাকগ্রাউন্ড স্ক্রলিংটি সামান্য ভিন্নভাবে কাস্টমাইজ করা যেতে পারে।
CSS ব্যবহার করে ট্যাবলেট ডিভাইসে প্যারালাক্স কাস্টমাইজ করা
/* ট্যাবলেট ডিভাইসে প্যারালাক্স স্ক্রলিং */
@media (min-width: 768px) and (max-width: 1024px) {
.parallax-background {
background-attachment: scroll;
background-position: center;
}
}
এখানে 768px এবং 1024px মধ্যে মিডিয়া কুয়েরি ব্যবহার করা হয়েছে, যা ট্যাবলেট ডিভাইসের স্ক্রীন সাইজের জন্য উপযুক্ত।
৪. প্যারালাক্স স্ক্রলিংয়ের স্লো ইফেক্ট অ্যাড করা
CSS এর মাধ্যমে প্যারালাক্স স্ক্রলিংকে আরও স্লো এবং স্মুথ করতে কিছু অতিরিক্ত স্টাইলিংও প্রয়োগ করা যেতে পারে।
CSS এর মাধ্যমে প্যারালাক্স স্ক্রলিং স্মুথ করা
.parallax-container {
overflow: hidden;
position: relative;
height: 100vh;
}
.parallax-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://via.placeholder.com/1920x1080');
background-size: cover;
background-position: center;
transition: background-position 0.1s ease-out; /* স্মুথ স্ক্রলিং */
}
এখানে transition: background-position 0.1s ease-out ব্যবহার করা হয়েছে, যা ব্যাকগ্রাউন্ড ইমেজের স্ক্রলিংকে আরও স্মুথ এবং ধীরে চালিত করবে।
সারাংশ
প্যারালাক্স স্ক্রলিং (Srallax Scrolling) কাস্টমাইজেশন বিভিন্ন ডিভাইসে গুরুত্বপূর্ণ, বিশেষত মোবাইল ডিভাইসে। CSS এর মাধ্যমে আপনি বিভিন্ন মিডিয়া কুয়েরি ব্যবহার করে প্যারালাক্স স্ক্রলিংকে ডিভাইস অনুযায়ী কাস্টমাইজ করতে পারেন। মোবাইল ডিভাইসে পারফরমেন্স উন্নত করার জন্য প্যারালাক্স বন্ধ করা যেতে পারে, এবং ডেক্সটপ বা ট্যাবলেটের জন্য এটি আরো ডাইনামিক করা যেতে পারে।
এই কাস্টমাইজেশন আপনাকে আপনার সাইটের ব্যবহারকারীর অভিজ্ঞতা এবং পারফরমেন্স আরও উন্নত করতে সাহায্য করবে।
Read more
